<template lang="html">
    <div v-if='flag' class="jianhuo">
      <!-- 轮播图 -->
      <div class="banner">
        <Lunbo></Lunbo>
      </div>
      <!-- 导航 -->
      <div class="tag">
        <div class="tags">
          <!-- 绑定点击事件，当点击时获取到导航图片的id值 用props传值，传给子组件 让子组件根据不同的id值解析不同的json文件 -->
          <div @click="chang(items.id + 1)" class="item" v-for='items in result.tags'>
            <div class="img">
              <img :src="items.img" alt="">
            </div>
            <span>{{ items.title }}</span>
          </div>
        </div>
      </div>
      <JHcontent :id="tempid"></JHcontent>
      <backTop :scrollmyself = 'true'></backTop>
    </div>
</template>

<script>
// 引入轮播图、尖货内容组件
import Lunbo from '../components/lunbo'
import JHcontent from '../components/JHcontent'
import backTop from '../components/backtop'
export default {
  data() {
    return {
        result: {},
        tempid:"",
        flag: true
        // info: {}
        // content: {}
    }
  },
  methods: {
    chang(item) {
      this.tempid = item;
    }
  },
  created() {
    this.axios.get('../static/data/jianhuo1.json').then(data=> {
      // console.log(data);
      this.result = data.data;
      // console.log(data.data.tags);
      // console.log(this.result);
    })
  },
  components: {
    Lunbo,
    JHcontent,
    backTop
  }
}
</script>

<style lang="css">
	.jianhuo {
	  width: 100%;
    display: flex;
    flex-direction: column;
    font-size: .3rem;
    background-color: white;
	}
  .banner {
    width: 100%;
    /*height: 4.7rem;*/
  }
  .tag {
    width: 100%;
    /*height: 1.8rem;*/
    /*margin:.3rem 0;*/
    overflow: auto;
    /*padding: .4rem 0;*/
    background: white;
  }
  .tags {
    width: 150%;
    /*height: 1.8rem;*/
    /*line-height: 1.8rem;*/
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .tags .item {
    width: 20%;
    /*height: 1rem;*/
    position: relative;
    text-align: center;
    margin: 5.5% 0;
  }
  .tags .item .img {
    width: 100%;
    /*height: 1rem;*/
  }
  .tags .item img {
    width: 62%;
    height: 100%;
    border-radius: 50%;
  }
  .tags .item span {
    display: inline-block;
    height: .59rem;
    line-height: .59rem;
    font-size: .25rem;
    color: white;
    position: absolute;
    top: 20%;
    left: 32%;
  }
</style>
